<template>
	<view class="z">
		<view class="a">
			<view class="al">
				头像
			</view>
			<view class="ar">
				<view class="arm">
					<image src="../../static/dingdan_imgs/tx.png" style="height:100rpx;width: 100rpx;"></image>
				</view>
			</view>
		</view>
		<view class="b">
			<view class="bl">
				昵称
			</view>
			<view class="br">
				摸鱼酱
			</view>
		</view>
		<view class="b">
			<view class="bl">
				性别
			</view>
			<view class="br">
				男
			</view>
		</view>
		<view class="d">
			<view class="bl">
				手机号
			</view>
			<view class="br">
				110
			</view>
		</view>
		<view class="b">
			<view class="bl">
				QQ
			</view>
			<view class="br">
				未绑定
			</view>
		</view>
		<view class="b">
			<view class="bl">
				微信
			</view>
			<view class="br">
				未绑定
			</view>
		</view>
		<view class="b">
			<view class="bl">
				微博
			</view>
			<view class="br">
				未绑定
			</view>
		</view>
		<view class="h">
			<view class="hl">
				签名
			</view>
			<view class="hr">
				真正的朋友就像宝石，珍贵又稀少。虚伪的朋友就像树叶，哪里都找得到。
			</view>
		</view>
		
		<view class="bcxg">
			保存修改
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.z{
		background-color: gainsboro;
	}
	.a{
		position: relative;
		height: 140rpx;
		background-color: white;
		border-bottom: 1rpx gainsboro solid;
	}
	.al{
		font-size: 24rpx;
		position: absolute;
		left: 40rpx;
		top: 55rpx;
	}
	.ar{
		position: absolute;
		right: 40rpx;
		top:20rpx;
	}
	.arm{		
		border: 1rpx gainsboro solid;
		border-radius: 50%;
		height: 100rpx;
		width: 100rpx;
	}
	.b{
		height: 88rpx;
		background-color: white;
		border-bottom: 1rpx gainsboro solid;
		position: relative;
	}
	.bl{
		font-size: 24rpx;
		position: absolute;
		left: 40rpx;
		top: 35rpx;
	}
	.br{
		font-size: 24rpx;
		position: absolute;
		right: 40rpx;
		top: 35rpx;
	}
	.d{
		height: 88rpx;
		background-color: white;
		border-bottom: 1rpx gainsboro solid;
		position: relative;
		margin-top: 20rpx;
	}
	.h{
		height: 200rpx;
		background-color: white;
		border-bottom: 1rpx gainsboro solid;
		position: relative;
		margin-top: 20rpx;
	}
	.hl{
		font-size: 24rpx;
		position: absolute;
		left: 40rpx;
		top: 35rpx;
	}
	.hr{
		font-size: 30rpx;
		position: absolute;
		left: 108rpx;
		top: 35rpx;
	}
	
	.bcxg{
		position: absolute;
		left: 55rpx;
		bottom: 35rpx;
		height: 88rpx;
		width: 630rpx;
		background: linear-gradient(to right, orange, red);
		border-radius: 100rpx;
		line-height: 88rpx;
		text-align: center;
	}

</style>
